<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器实战示例</title>
    <style>
        /* ---------- 基础选择器 ---------- */
        /* 1. 元素选择器 */
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        /* 2. 类选择器 */
        .highlight {
            background-color: yellow;
        }

        /* 3. ID 选择器 */
        #main-title {
            color: #2c3e50;
            font-size: 24px;
        }

        /* ---------- 组合选择器 ---------- */
        /* 4. 后代选择器 (空格) */
        nav a {
            text-decoration: none;
            color: #3498db;
        }

        /* 5. 子元素选择器 (>) */
        ul > li {
            border-left: 3px solid #e74c3c;
            padding-left: 10px;
        }

        /* 6. 相邻兄弟选择器 (+) */
        h2 + p {
            font-style: italic;
            color: #7f8c8d;
        }

        /* 7. 通用兄弟选择器 (~) */
        h3 ~ p {
            margin-left: 20px;
        }

        /* ---------- 属性选择器 ---------- */
        /* 8. [attr=value] */
        input[type="text"] {
            border: 2px solid #3498db;
            padding: 5px;
        }

        /* 9. [href^="https"] */
        a[href^="https"]::after {
            content: "🔒";
            margin-left: 5px;
        }

        /* ---------- 伪类选择器 ---------- */
        /* 10. :hover */
        button:hover {
            transform: scale(1.05);
            cursor: pointer;
        }

        /* 11. :nth-child() */
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        /* 12. :not() */
        li:not(.special) {
            opacity: 0.8;
        }

        /* 13. :first-child / :last-child */
        li:first-child {
            font-weight: bold;
        }

        /* ---------- 伪元素 ---------- */
        /* 14. ::before */
        .price::before {
            content: "¥";
            color: #e74c3c;
        }

        /* 15. ::after */
        .tooltip::after {
            content: "（点击查看详情）";
            font-size: 0.8em;
            color: #95a5a6;
        }
    </style>
</head>
<body>
    <!-- 基础选择器示例 -->
    <h1 id="main-title">CSS 选择器教学示例</h1>
    <p class="highlight">这个段落会高亮显示</p>

    <!-- 组合选择器示例 -->
    <nav>
        <a href="#home">首页</a> | 
        <a href="https://example.com">安全链接</a>
    </nav>

    <ul>
        <li>列表项 1（第一个子元素加粗）</li>
        <li class="special">特殊列表项（透明度不变）</li>
        <li>列表项 3</li>
    </ul>

    <h2>相邻兄弟选择器示例标题</h2>
    <p>这个段落是 h2 的相邻兄弟</p>

    <h3>通用兄弟选择器示例标题</h3>
    <p>第一个兄弟段落</p>
    <p>第二个兄弟段落</p>

    <!-- 属性选择器示例 -->
    <input type="text" placeholder="文本输入框">
    <input type="password" placeholder="密码输入框">

    <!-- 伪类选择器示例 -->
    <table>
        <tr><td>奇数行</td></tr>
        <tr><td>偶数行（背景变灰）</td></tr>
        <tr><td>奇数行</td></tr>
    </table>

    <button>悬停放大按钮</button>

    <!-- 伪元素示例 -->
    <p class="price">199</p>
    <p class="tooltip">重要提示</p>
</body>
</html>
